<template>
	<view :class="[primarySize()]">
		<view class="page-foot">
			<view class="btn1" @click="toggleAddTextPop">添加常用语</view>
		</view>
		<view class="container">
			<view class="word m-hairline--bottom flex-box" v-for="(item,index) in sentence" id="id">
				<view class="flex-grow-1">{{item.name}}</view>
				<image @click="toggleEditTextPop" :data-index="index" class="icon_edit"
					:src="iconPath('edit.png')" mode="widthFix"></image>
				<image @click="toggleDelText" :data-id="item.id" class="icon_del" :src="iconPath('del.png')"
					mode="widthFix"></image>
			</view>
		</view>
		<!-- 添加常用语弹窗 -->
		<view class="pop_mask" :class="[isAddTextPop ? 'pop_show' : '']" @click="toggleAddTextPop"
			catchtouchmove="preventdefault"></view>
		<view class="pop_wrap pop_add_text" :class="[isAddTextPop ? 'pop_show' : '']">
			<view class="pop-close" @click="toggleAddTextPop">
				<image src="https://admin.mosizp.cn/static/public/pop_close.png" mode="aspectFit"></image>
			</view>
			<view class="pop-title">添加常用语</view>
			<textarea v-if="isAddTextPop" class="textarea" @input="textInput" :value="currentText" placeholder="输入您的常用语"
				placeholder-style="color: #aaaaaa;" :maxlength="maxTextLength"></textarea>
			<view class="pop_foot flex-box">
				<view class="flex-grow-1">{{currentText.length}}/{{maxTextLength}}</view>
				<view class="btn_text" @click="addText">完成</view>
			</view>
		</view>

		<!-- 修改常用语 -->
		<view class="pop_mask" :class="[isEditTextPop ? 'pop_show' : '']" @click="toggleEditTextPop"
			catchtouchmove="preventdefault"></view>
		<view class="pop_wrap pop_add_text" :class="[isEditTextPop ? 'pop_show' : '']">
			<view class="pop-close" @click="toggleEditTextPop">
				<image src="https://admin.mosizp.cn/static/public/pop_close.png" mode="aspectFit"></image>
			</view>
			<view class="pop-title">修改常用语</view>
			<textarea v-if="isEditTextPop" class="textarea" @input="textInput" :value="currentText"
				placeholder="输入您的常用语" placeholder-style="color: #aaaaaa;" :maxlength="maxTextLength"></textarea>
			<view class="pop_foot flex-box">
				<view class="flex-grow-1">{{currentText.length}}/{{maxTextLength}}</view>
				<view class="btn_text" @click="addText">完成</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {

		data() {
			return {
				
				sentence_id: 0,
				sentence: [],
				isAddTextPop: false,
				currentText: "",
				maxTextLength: 200,
				isEditTextPop: false
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad() {
			
			this.getSentence();
		},
		methods: {
			// 关闭添加常用语弹窗
			toggleAddTextPop: function() {
				this.isAddTextPop = !this.isAddTextPop

			},
			// 关闭修改常用语弹窗
			toggleEditTextPop: function(e) {
				var isEditTextPop = this.isEditTextPop;
				if (!isEditTextPop) {
					let index = e.currentTarget.dataset.index;
					let sentence = this.sentence;
					if (sentence[index].user_id == 0) {
						uni.showToast({
							title: '内置信息不可编辑',
							icon: 'none'
						})
						return false;
					}
					this.sentence_id = sentence[index].id
					this.isEditTextPop = !isEditTextPop
					this.currentText = sentence[index].name
				} else {
					this.sentence_id = 0
					this.isEditTextPop = !isEditTextPop
					this.currentText = ''

				}

			},
			// 添加完成常用语
			addText: function() {
				var that = this;
				var currentText = that.currentText.trim();
				var sentence_id = that.sentence_id;
				this.$core.post({
					url: '/xilujob.sentence/add_sentence',
					data: {
						sentence_id: sentence_id,
						content: currentText
					},
					success: ret => {
						that.getSentence();
						that.sentence_id = 0
						that.isEditTextPop = false
						that.isAddTextPop = false
						that.currentText = ""
					},
					fail: ret => {
						uni.showToast({
							title: ret.msg,
							icon: 'none'
						});
						return false;
					}
				});

			},
			// 输入常用语
			textInput(e) {
				if (e.detail.value.length <= this.maxTextLength) {
					this.currentText = e.detail.value
				} else {
					this.currentText = this.currentText
					uni.showToast({
						title: '字数不超过' + this.maxTextLength + '字',
						icon: 'none'
					})
				}
			},
			//常用语
			getSentence() {
				this.$core.get({
					url: '/xilujob.sentence',
					data: {},
					success: ret => {
						this.sentence = ret.data

					},
					fail: ret => {
						uni.showToast({
							title: ret.msg,
							icon: 'none'
						});
						return false;
					}
				});
			},
			toggleDelText(e) {
				var that = this;
				var sentence_id = e.currentTarget.dataset.id;
				uni.showModal({
					title: '提示',
					content: '确定删除？',
					complete: (res) => {
						if (res.confirm) {
							this.$core.post({
								url: '/xilujob.sentence/del_sentence',
								data: {
									sentence_id: sentence_id
								},
								success: ret => {
									that.getSentence();
								}
							});
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.page-foot {
		padding: 8rpx 30rpx;
		background-color: #fff;
	}

	.page-foot .foot_btn1 {
		width: 690rpx;
		height: 82rpx;
		border-radius: 5rpx;
		background: #2FC971;
		color: #ffffff;
		font-family: "PingFangSC-Regular";
		font-size: 30rpx;
		font-weight: 400;
		line-height: 82rpx;
		text-align: center;
	}

	@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
		.page-foot {
			padding-bottom: calc(34px/2 + 8rpx);
			padding-bottom: calc(constant(safe-area-inset-bottom)/2 + 8rpx);
			padding-bottom: calc(env(safe-area-inset-bottom)/2 + 8rpx);
		}

		.page-foot~.container {
			padding-bottom: calc(34px/2 + 100rpx);
			padding-bottom: calc(constant(safe-area-inset-bottom)/2 + 100rpx);
			padding-bottom: calc(env(safe-area-inset-bottom)/2 + 100rpx);
		}
	}

	.word {
		padding: 40rpx 0;
		color: #555555;
		font-family: "PingFangSC-Regular";
		font-size: 30rpx;
		font-weight: 400;
		line-height: 32rpx;
	}

	.word .icon_edit {
		margin: 0 0 0 30rpx;
		display: block;
		width: 45rpx;
		height: 45rpx;
		border-radius: 50%;
	}

	.word .icon_del {
		margin: 0 0 0 30rpx;
		display: block;
		width: 45rpx;
		height: 45rpx;
	}

	/* 弹窗类 */
	.pop_mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 200;
		opacity: 0;
		visibility: hidden;
	}

	.pop_wrap {
		position: fixed;
		opacity: 0;
		visibility: hidden;
		z-index: 201;
	}

	.pop_show {
		-webkit-transition-duration: 400ms;
		transition-duration: 400ms;
		opacity: 1;
		visibility: visible;
	}

	.pop-close {
		position: absolute;
		right: 30rpx;
		top: 45rpx;
		width: 34rpx;
		height: 34rpx;
	}

	.pop-close image {
		display: block;
		width: 34rpx;
		height: 34rpx;
	}

	.pop-title {
		padding: 0 75rpx 20rpx;
		font-size: 30rpx;
		color: #101010;
		text-align: center;
		line-height: 36rpx;
	}


	/* 常用语弹窗 */
	.pop_add_text {
		bottom: 0;
		left: 0;
		padding: 40rpx 30rpx;
		width: 750rpx;
		height: 675rpx;
		border-radius: 2rpx;
		background: #ffffff;
		box-sizing: border-box;
	}

	.pop_add_text .textarea {
		width: 100%;
		height: 450rpx;
		color: #333;
		font-family: "PingFangSC-Regular";
		font-size: 30rpx;
		font-weight: 400;
		line-height: 36rpx;
	}

	.pop_add_text .pop_foot {
		position: absolute;
		bottom: 40rpx;
		width: 690rpx;
		color: #cccccc;
		font-family: "PingFangSC-Regular";
		font-size: 30rpx;
		font-weight: 400;
		line-height: 36rpx;
	}

	.pop_add_text .btn_text {
		padding: 0 30rpx;
		height: 60rpx;
		line-height: 60rpx;
	}

	.btn_text {
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #fff;
		background-color: #FF7100;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 8rpx;
	}
</style>